<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }

        .clock div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/hour.png) no-repeat center center;
        }

        #m {
            background-image: url(images/minute.png);
        }

        #s {
            background-image: url(images/second.png);
        }
    </style>
</head>
<body>
    <div class="clock">
        <div id="h"></div>
        <div id="m"></div>
        <div id="s"></div>
    </div>
    <!--javascript-->
    <script>
        //先找人
        function $( element ) {
            return document.getElementById( element );
        }
        var h = $('h'); //时
        var m = $('m'); //分
        var s = $('s'); //秒
        setInterval(lock,10);
        function lock() {
            var d = new Date(); console.log(d);

            //秒事件
            var ms = d.getMilliseconds();//毫秒
            var ds= d.getSeconds() + ms / 1000; //秒
            s.style.transform = 'rotate('+ ds*6 +'deg)';

            //分钟的事件
            var dm = d.getMinutes() + ds / 60; //分
            m.style.transform = 'rotate('+ dm*6 +'deg)';

            //小时的事件
            var dh = d.getHours() + dm / 60 ; //小时
            h.style.transform = 'rotate('+ dh*30 +'deg)';

        }

        //var d = new Date(); console.log( d );


    </script>

</body>
</html>